<template>
  <div class="main">
    <div class="group_price">
        <a :href="title_link.link" :title="title_link.title" class="paTitle">{{ title_link.title }}</a>
        <div class="banner">
            <swiper :list="list" :aspect-ratio="800/800" loop auto v-model="index"></swiper>
        </div>
        <div class="pro_details">
            <p class="title">{{ details.title }}</p>
            <div class="scorestar">
              <img src="../assets/lightstar.png" v-for="item in details.scorestar" :alt="item" />
              <span>{{ details.scorestar }}分</span>
            </div>
            <div class="inventory">
              <ul>
                <li>
                  <span>{{ details.sold }}</span>
                  <p>已售</p>
                </li>
                <li>
                  <span>{{ details.storage }}</span>
                  <p>库存</p>
                </li>
                <li class="date">
                  <p>距结束还有:</p>
                  <ul>
                    <li>
                      <span>99</span>
                      <p>天</p>
                    </li>
                    <li>
                      <span>19</span>
                      <p>时</p>
                    </li>
                    <li>
                      <span>45</span>
                      <p>分</p>
                    </li>
                    <li>
                      <span>45</span>
                      <p>秒</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
        </div>
        <div class="pro_desc">
            <ul class="tab">
                <li v-for="(item, index) in tab" :class="{current:item.status}" @click="tabs(index)"><a href="javascript:;">{{ item.title }}</a></li>
            </ul>
            <div class="pro_desc pro" v-show="product_info[0].status">
                <h4>商品描述</h4>
                <div class="content">
                  <img v-for="item in product_info[0].list" :src="item" alt="" />
                </div>
            </div>
            <div class="sale_record pro" v-show="product_info[1].status">
                <div class="prod_head">
                    <strong>购买记录</strong>
                </div>
                <div class="content">
                    <table cellspacing="0">
                        <thead>
                            <tr class="thead">
                                <th class="t1" scope="col">购买人</th>
                                <th class="t2" scope="col" style="min-width:33px;">会员级别</th>
                                <th class="t4" scope="col">数量</th>
                                <th scope="col" style="max-width:54px;">属性</th>
                                <th class="t3" scope="col">购买时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td v-for="item in product_info[1].list">{{ item }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <span>总计 {{ product_info[1].list.length }} 条记录</span>
                </div>
            </div>
            <div class="comm_record pro" v-show="product_info[2].status">
                <div class="prod_head">
                    <strong>顾客评论</strong>
                </div>
                <div class="content">
                    <div class="pro_goods">
                        <span>商品满意度：</span>
                        <div :class="['point', 'point'+details.scorestar]">{{ details.scorestar }}星</div>
                    </div>
                    <div class="pro_comm">
                        <ul>
                            <li v-if="product_info[2].list.length == 0">暂无评价信息</li>
                            <li v-for="item in product_info[2].list">{{ item }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mess_record pro" v-show="product_info[3].status">
                <div class="prod_head">
                    <strong>买家问答</strong>
                    <span>共 <span>{{ product_info[3].list.length }}</span> 条记录</span>
                    <a href="javascript:;" class="btn">我要提问</a>
                </div>
                <div class="content">
                    <ul>
                        <li v-if="product_info[3].list.length == 0">暂无评价信息</li>
                        <li v-for="item in product_info[3].list">{{ item }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import { Swiper } from 'vux'
  export default {
  	data (){
  		return {
        title_link: {
          title: '秒杀',
          link: '#/list_seckill'
        },
        list: [{
          url: 'javascript:',
          img: require('../assets/gz5e.jpg'),
        }, {
          url: 'javascript:',
          img: require('../assets/tejiaPro2.jpg'),
        }],
        index: 0,
        tab: [
          {
            title: '商品信息',
            status: true
          },
          {
            title: '购买记录',
            status: false
          },
          {
            title: '顾客评论',
            status: false
          },
          {
            title: '买家问答',
            status: false
          },
        ],
        details: {
          title: '2016新茶上市 西湖牌百年老茶树西湖龙井茶叶200g经典绿茶纸包',
          scorestar: 5,
          sold: 0,
          storage: 30,
        },
        product_info: [
          {
              status: true,
              list: [
                require('../assets/pro_detail.jpg'),
                require('../assets/pro_detail2.jpg'),
                require('../assets/pro_detail3.jpg'),
              ]
          },
          {
              status: false,
              list: [
                '内容','内容','内容','内容','内容'
              ]
          },
          {
              status: false,
              list: [
                '内容','内容','内容','内容','内容'
              ]
          },
          {
              status: false,
              list: [
                '内容','内容','内容','内容','内容'
              ]
          }
        ]
      }
  	},
    methods: {

    },
    computed: {
      update (){
          console.log('msg='+ this.$route.query.msg + '&id='+ this.$route.query.id);
          if (this.$route.query.msg == 'groupprice') {
            this.title_link = {
              title: '团购',
              link: '#/list_groupprice?list=groupprice'
            }
          }else if(this.$route.query.msg == 'seckill'){
            this.title_link = {
              title: '秒杀',
              link: '#/list_groupprice?list=seckill'
            }
          }
      }
    },
    created (){
      this.update;
    },
    watch: {
        $route(){
           this.update;
        }
    },
    components: {
      Swiper
    },
    methods: {
      tabs (index){
          for (var i = 0; i < this.tab.length; i++) {
              this.tab[i].status = false;
              this.product_info[i].status = false;
          }
          this.product_info[index].status = true;
          this.tab[index].status = true;
      },
    }
  }
</script>
<style>
    .group_price{
      overflow:hidden; background:#f7f7f7;
    }
    .group_price .paTitle{
        width:100%; height:.44rem; background:#f4f4f4; text-align:center; font-size:.16rem; display:block; line-height:.44rem; margin:0 0 .1rem;
    }
    .pro_details{
      overflow:hidden; background:#fff;
    }
    .pro_details .title{
      padding:.1rem .1rem .06rem; color:#959595; font-size:.14rem;line-height:1.6em;
    }
    .pro_details .scorestar{
      width:1.1rem; overflow:hidden; padding:0 .1rem .1rem;
    }
    .pro_details .scorestar img{
      width:.11rem; margin:0 .01rem;
    }
    .pro_details .scorestar span{
      color:#8fc31f; float:right; line-height:.12rem; font-size:.1rem;
    }
    .pro_details .inventory{
      overflow:hidden; border-top:0.01rem solid #e1e1e1; border-bottom:0.01rem solid #e1e1e1; background:#fff; margin:0 0 0.16rem;
    }
    .pro_details .inventory>ul>li{
      width:25%; float:left; line-height:1.8em; overflow:hidden; text-align:center; border-right:.01rem solid #e1e1e1; padding:0.14rem 0px; 
    }
    .inventory>ul>li>span{
      display:block; font-size:.18rem; line-height:1.2em;
    }
    .inventory>ul>li p{
      color:#959595;
    }
    .inventory>ul>.date>p{
      font-weight:bold; margin:.03rem 0 0 .05rem;
    }
    .pro_details .inventory>ul>.date{
      width:40%; text-align:left; padding:0 .15rem; border:none;
    }
    .pro_details .inventory .date li{
      float:left; width:25%; float:left; font-size:.16rem; text-align:center; color:#959595;
    }
    .pro_details .inventory .date ul p{
      background:#959595;width:.22rem; height:.18rem; margin:0 auto; line-height:.18rem; color:#fff; -webkit-border-radius:0.05rem;-o-border-radius:0.05rem;-moz-border-radius:0.05rem;-ms-border-radius:0.05rem;border-radius:0.05rem;
    }
    .pro_details .inventory>ul ul{
      overflow:hidden;
    }
    .pro_desc .btns{
        overflow:hidden; border-bottom:0.01rem solid #eee; border-top:0.01rem solid #eee; padding:.15rem 0;
    }
    .pro_desc .btns a{
        width:1.3rem; height:.36rem; font-size:.16rem; float:left; margin-right:.12rem; display:block; text-align:center; line-height:0.36rem; color:#fff; -webkit-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);-o-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);-ms-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6); -moz-box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6); box-shadow:0 0.01rem 0.02rem 0 rgba(0,0,0,.6);
    }
    .pro_desc .btns .buy{
        background:url('../assets/buysub.gif');
    }
    .pro_desc .btns .add{
        background:url('../assets/addbutton.gif'); color:#6f6f6f; border:0.01rem solid #cacaca; -webkit-border-radius:0.02rem;-o-border-radius:0.02rem;-ms-border-radius:0.02rem; border-radius:0.02rem;
    }
    .pro_desc,.pro_desc .tab{
        overflow:hidden;
    }
    .pro_desc .tab{
      overflow:hidden; background:#fff;
    }
    .pro_desc .tab li{
        width:24.6%; float:left; text-align:center;
    }
    .pro_desc .tab li a{
        font-size:.12rem; display:block; width:100%; color:#959595; border:0.01rem solid #e1e1e1; border-left:none; height:.4rem; line-height:.4rem;
    }
    .pro_desc .tab .current a{
        border-bottom:0; color:#e5004f; border-top:0.02rem solid #e5004f;letter-spacing:0.01rem;
    }
    .pro_desc .pro_desc{
        padding:0.05rem;
    }
    .pro_desc .pro{
        overflow:hidden; background:#f9f9f9;
    }
    .pro_desc .pro_desc img{
        max-width:100%;
    }
    .pro_desc .pro_desc h4{
        width:100%; height:.3rem; background:#DBD8D5; margin: 0 0 0.05rem; text-indent:.1rem; line-height:0.3rem;
    }
    .pro_desc .pro_desc p{
        text-indent:1em; line-height:0.2rem;
    }
    .pro_desc .prod_head{
        border-top:0.02rem solid #B0B0B0; padding:.03rem; margin:.12rem 0;
    }
    .pro_desc .prod_head strong{
        font-size:.18rem; margin-right:.45rem; color:#333; font-weight:bold;
    }
    .pro_desc .content table{
        width:100%; text-align:center; color:#333;
    }
    .pro_desc .content table th{
        border-bottom:0.02rem solid #D7D7D7;
    }
    .pro_desc .content table tr{
        height:.27rem;
    }
    .pro_desc .content table td{
        border-bottom:0.01rem dotted #C6C6C6; color:#676767;
    }
    .pro_desc .sale_record .content>span{
        float:right; margin:0.1rem 0 0;
    }
    .pro_desc .comm_record .content>div{
        padding:0.1rem; overflow:hidden; width:100%;
    }
    .pro_desc .pro_goods span{
        float:left; font-weight:bold; line-height:.24rem;
    }
    .pro_desc .comm_record .point{
        float:left; font-size:.14rem; line-height:.24rem; color:#F60; vertical-align:middle; font-weight:bold; padding-left:1.35rem; 
    }
    .pro_desc .comm_record .point5{
        background:url(../assets/show-b.jpg)0 -200px no-repeat;
    }
    .pro_desc .comm_record .point4{
        background:url(../assets/show-b.jpg)0 -150px no-repeat;
    }
    .pro_desc .comm_record .point3{
        background:url(../assets/show-b.jpg)0 -100px no-repeat;
    }
    .pro_desc .comm_record .point2{
        background:url(../assets/show-b.jpg)0 -50px no-repeat;
    }
    .pro_desc .comm_record .point1{
        background:url(../assets/show-b.jpg)0 0px no-repeat;
    }
    .pro_desc .mess_record .btn{
        display:inline-block; float:right; width:.78rem; height:.27rem; text-align:center; line-height:.27rem; border:0.01rem solid #cb3a00; color:#fff; background:url('../assets/btn-y.gif') 0 0 no-repeat; background-size:.78rem .27rem;
    }
    .pro_desc .mess_record .content{
        padding:0 .12rem;
    }
    .pro_desc .content li{
        line-height:.24rem;
    }
</style>
